<script setup lang="ts">
import { ObjectUtil } from '@utils/object-util'
import { Cell } from '@antv/x6'

const props = defineProps<{
  cell: Cell | any
}>()

// watch(() => props.cell, function (nv, ov) {
//   // 当切换节点时
//   nv && nv.on('change:*', syncCell) && syncCell()
//   ov && ov.off('change:*', syncCell)
// })
//
const _cell = shallowRef<typeof props.cell>()
onMounted(function () {
  init()
  // syncCell()
  // props.cell.on('change:*', syncCell)
})

watch(() => props.cell, () => {
  init()
})

function init () {
  _cell.value = toRaw(props.cell)
  if (!props.cell.router) _cell.value.router = { name: 'normal' }
  if (!props.cell.connector) _cell.value.connector = { name: 'normal' }
  cellAttrs.value = ObjectUtil.copy(props.cell.attrs)
  cellRouter.value = ObjectUtil.copy(props.cell.router)
  cellConnector.value = ObjectUtil.copy(props.cell.connector)
  if (_cell.value.data?.connecting) {
    ObjectUtil.updateVal(connecting.value, _cell.value.data.connecting)
  }
}

// region TODO 属性
const cellAttrs = ref({ line: {} })
function updateAttrsHandle (key: string, value: any, defaultValue?: any) {
  _cell.value.attr(key, value || defaultValue)
}
// endregion

// region TODO 路由
const cellRouter = ref({})
function updateRouterHandle () {
  _cell.value.prop('router', { ...cellRouter.value })
}
// endregion

// region TODO 连接器
const cellConnector = ref({})
function updateConnectorHandle () {
  _cell.value.prop('connector', { ...cellConnector.value })
}
// endregion

// region TODO 连线
const connecting = ref({
  validateConnectionConfig: {
    onlyConnectPort: false
  }
})
function connectRuleChangeHandle () {
  if (_cell.value.data?.connecting?.validateConnectionConfig) {
    _cell.value.data.connecting.validateConnectionConfig = connecting.value.validateConnectionConfig
  } else {
    ObjectUtil.assignDeep(_cell.value, {
      data: { connecting: connecting.value }
    })
  }
}
// endregion

</script>

<template>
  <el-collapse-item v-if="_cell" title="基础属性" name="基础属性">
    <div class="attr-grid">
      <el-form-item label="线宽">
        <el-input-number v-model="cellAttrs.line.strokeWidth" :min="0" @change="updateAttrsHandle('line/strokeWidth', $event)" />
      </el-form-item>
      <el-form-item label="颜色">
        <el-color-picker v-model="cellAttrs.line.stroke" show-alpha @change="updateAttrsHandle('line/stroke', $event, 'rgba(0,0,0,0)')" />
      </el-form-item>
      <el-form-item label="路由">
        <el-select v-model="cellRouter.name" @change="updateRouterHandle">
          <el-option value="normal" label="默认路由（normal）" />
          <el-option value="orth" label="正交路由（orth）" />
          <el-option value="oneSide" label="受限正交路由（oneSide）" />
          <el-option value="manhattan" label="智能正交路由（manhattan）" />
          <el-option value="metro" label="智能地铁线路由（metro）" />
          <el-option value="er" label="实体关系路由（er）" />
        </el-select>
      </el-form-item>
      <el-form-item label="连接">
        <el-select v-model="cellConnector.name" @change="updateConnectorHandle">
          <el-option value="normal" label="简单连接器（normal）" />
          <el-option value="smooth" label="平滑连接器（smooth）" />
          <el-option value="rounded" label="圆角连接器（rounded）" />
          <el-option value="jumpover" label="跳线连接器（jumpover）" />
        </el-select>
      </el-form-item>
      <p class="fs-12 text-color-regular" style="grid-column: 1 / 3">源箭头</p>
      <el-form-item label="箭头类型">
        <el-select
          v-model="cellAttrs.line.sourceMarker.name"
          @change="updateAttrsHandle('line/sourceMarker/name', $event)"
        >
          <el-option value="" label="无箭头" />
          <el-option value="block" label="实心箭头（block）" />
          <el-option value="classic" label="经典箭头（classic）" />
          <el-option value="diamond" label="菱形箭头（diamond）" />
        </el-select>
      </el-form-item>
      <!--<el-form-item label="箭头线宽" />-->
      <!--<el-form-item label="箭头颜色" />-->
      <!--<el-form-item label="箭头填充颜色" />-->
      <el-form-item label="箭头宽">
        <el-input-number
          v-model="cellAttrs.line.sourceMarker.width" :min="0"
          @change="updateAttrsHandle('line/sourceMarker/width', $event)"
        />
      </el-form-item>
      <el-form-item label="箭头高">
        <el-input-number
          v-model="cellAttrs.line.sourceMarker.height" :min="0"
          @change="updateAttrsHandle('line/sourceMarker/height', $event)"
        />
      </el-form-item>
      <!--<el-form-item label="箭头半径" />-->
      <!--<el-form-item label="箭头偏移" />-->
      <p class="fs-12 text-color-regular" style="grid-column: 1 / 3">目标箭头</p>
      <el-form-item label="箭头类型">
        <el-select
          v-model="cellAttrs.line.targetMarker.name"
          @change="updateAttrsHandle('line/targetMarker/name', $event)"
        >
          <el-option value="" label="无箭头" />
          <el-option value="block" label="实心箭头（block）" />
          <el-option value="classic" label="经典箭头（classic）" />
          <el-option value="diamond" label="菱形箭头（diamond）" />
        </el-select>
      </el-form-item>
      <!--<el-form-item label="箭头线宽" />-->
      <!--<el-form-item label="箭头颜色" />-->
      <!--<el-form-item label="箭头填充颜色" />-->
      <el-form-item label="箭头宽">
        <el-input-number
          v-model="cellAttrs.line.targetMarker.width"
          :min="1" @change="updateAttrsHandle('line/targetMarker/width', $event, 1)"
        />
      </el-form-item>
      <el-form-item label="箭头高">
        <el-input-number
          v-model="cellAttrs.line.targetMarker.height"
          :min="1" @change="updateAttrsHandle('line/targetMarker/height', $event, 1)"
        />
      </el-form-item>
      <!--<el-form-item label="箭头半径" />-->
      <!--<el-form-item label="箭头偏移" />-->
      <p class="fs-12 text-color-regular" style="grid-column: 1 / 3">连线</p>
      <el-form-item label="仅关联连接桩">
        <el-switch v-model="connecting.validateConnectionConfig.onlyConnectPort" @change="connectRuleChangeHandle" />
      </el-form-item>
    </div>
  </el-collapse-item>
</template>

<style lang="scss" scoped>
</style>
